<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { TrendCharts, Document } from '@element-plus/icons-vue'
import { getUserCarsCountApi } from '@/api/car'
import { countByUserIdApi as countMaintenanceByUserIdApi } from '@/api/maintenance'
import { countByUserIdApi as countRepairByUserIdApi } from '@/api/repair'

const userInfo = ref({})
const carCount = ref(0)
const serviceCount = ref(0)

onMounted(async () => {
  // 获取用户信息
  const loginUser = JSON.parse(localStorage.getItem('loginUser'))
  if (loginUser) {
    userInfo.value = loginUser
    
    try {
      // 并行获取各种统计数据
      const [carsResult, maintenanceResult, repairResult] = await Promise.all([
        getUserCarsCountApi(loginUser.id),
        countMaintenanceByUserIdApi(loginUser.id),
        countRepairByUserIdApi(loginUser.id)
      ])
      
      // 设置车辆数量
      if (carsResult.code) {
        carCount.value = carsResult.data
      } else {
        ElMessage.error(carsResult.msg || '获取车辆数量失败')
      }
      
      // 计算历史服务记录总数（保养+维修）
      let totalMaintenance = 0
      let totalRepair = 0
      
      if (maintenanceResult.code) {
        totalMaintenance = maintenanceResult.data || 0
      } else {
        ElMessage.error(maintenanceResult.msg || '获取保养记录统计失败')
      }
      
      if (repairResult.code) {
        totalRepair = repairResult.data || 0
      } else {
        ElMessage.error(repairResult.msg || '获取维修记录统计失败')
      }
      
      // 设置历史服务记录总数
      serviceCount.value = totalMaintenance + totalRepair
      

      
    } catch (error) {
      ElMessage.error('获取统计数据异常：' + error.message)
      console.error('获取统计数据失败：', error)
    }
  } else {
    ElMessage.error('未找到用户信息')
    // 如果没有登录用户，直接返回，避免后续使用 loginUser.id 报错
    return
  }
})
</script>

<template>
  <div class="user-home">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card shadow="hover" class="welcome-card">
        <div class="welcome-content">
          <h2>欢迎回来，{{ userInfo.name }}！</h2>
          <p class="welcome-desc">感谢您使用我们的汽车4S服务系统</p>
          <p class="current-time">{{ new Date().toLocaleDateString() }}</p>
        </div>
        <div class="welcome-image">
          <el-avatar size="large" :src="userInfo.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
        </div>
      </el-card>
    </div>

    <!-- 数据概览 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" class="stat-card car-stat">
            <div class="stat-icon">
              <el-icon class="icon-large"><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ carCount }}</h3>
              <p>我的车辆</p>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card shadow="hover" class="stat-card service-stat">
            <div class="stat-icon">
              <el-icon class="icon-large"><Document /></el-icon>
            </div>
            <div class="stat-info">
              <h3>{{ serviceCount }}</h3>
              <p>历史服务记录</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 快捷操作 -->
    <div class="quick-actions">
      <h3>快捷操作</h3>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="action-card" @click="$router.push('/user/appointment')">
            <div class="action-icon appointment-icon">
              <el-icon><Calendar /></el-icon>
            </div>
            <p>预约服务</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="action-card" @click="$router.push('/user/mycars')">
            <div class="action-icon car-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <p>查看车辆</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="action-card" @click="$router.push('/user/records')">
            <div class="action-icon record-icon">
              <el-icon><Document /></el-icon>
            </div>
            <p>服务记录</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="action-card" @click="$router.push('/user/feedback')">
            <div class="action-icon feedback-icon">
              <el-icon><ChatDotRound /></el-icon>
            </div>
            <p>投诉建议</p>
          </el-card>
        </el-col>
      </el-row>
    </div>


  </div>
</template>

<style scoped>
.user-home {
  font-family: 'Arial', sans-serif;
}

.welcome-section {
  margin-bottom: 30px;
}

.welcome-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.welcome-content h2 {
  margin: 0 0 10px 0;
  color: #333;
}

.welcome-desc {
  color: #666;
  margin: 0 0 10px 0;
}

.current-time {
  color: #999;
  margin: 0;
}

.welcome-image {
  margin-left: 30px;
}

.stats-section {
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  height: 120px;
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  font-size: 48px;
  margin-right: 20px;
}

.car-stat .stat-icon {
  color: #4e73df;
}



.service-stat .stat-icon {
  color: #36b9cc;
}

.stat-info h3 {
  margin: 0;
  font-size: 32px;
  color: #333;
}

.stat-info p {
  margin: 5px 0 0 0;
  color: #666;
}

.quick-actions h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.action-card {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.action-card:hover {
  transform: translateY(-5px);
}

.action-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.appointment-icon {
  color: #4e73df;
}

.car-icon {
  color: #1cc88a;
}

.record-icon {
  color: #36b9cc;
}

.feedback-icon {
  color: #f6c23e;
}

.action-card p {
  margin: 0;
  color: #333;
}


</style>